<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<%@ include file="../../header.jsp"%>
 <link href="<c:out value="${ctx}"/>/pagejs/pagination.css" rel="stylesheet">
<!--引入JS-->
<script src="${ctx }/bootstrap/js/number.js"></script>
<script type="text/javascript" src="${ctx }/pagejs/pagination.js"></script>
<meta charset="UTF-8" />
<style>
	*{
		padding:0;
		margin:0;
	}
	
	.nine li{
		list-style:none;
		float: left;
		width: 210px;
		height:250px;
		margin-right: 18px;
		margin-bottom: 20px;
		overflow: hidden;
		position: relative;
		cursor: pointer;
		padding: 2px;
	}
	
	.nine li:hover{
		border:1px solid rgb(255,64,89);
	}
	
	.nine li:hover span{
		display: block;
	}
	
	.nine li:hover img{
		transform:scale(1.2,1.2);
	}
	
	.nine li img{
		width:100%;
		overflow: hidden;
		transition: all 500ms linear;
	}
	
	.nine li p{
		position: absolute;
		left: 0px;
		bottom: 0px;
		color: white;
		height:40px;
		line-height:40px;
		width:100%;
		background: rgba(0,0,0,0.5);
		cursor: pointer;
		text-align: center;
	}
	
	.nine li .glyphicon-remove{
		display: none;
		position: absolute;
		top:0;
		right:0;
	}
	
	.nine li .glyphicon-export{
		display: none;
		position: absolute;
		top:0;
		left:0;
	}
	
	.nine li .glyphicon-thumbs-up{
		display: none;
		position: absolute;
		top:20px;
		left:0;
	}
	
	.nine li .glyphicon-eye-open{
		display: none;
		position: absolute;
		top:20px;
		right:0;
	}
	
	.nine h1{
		paddint-top:15px;
	}
	
}
}
	
</style>
<script>
	$(".mkbanner >li:eq(1)").addClass("active");
$(function() {
	
	$(".nine .glyphicon-export").click(function(){ // top topic
		var id = $(this).parent().parent().attr("data-id");
		$.post(ctx + "/topic/top",{
			top:1,
			topicId:id
		},function(result){
			result_(result);
		});
	});
	
	$('#myTab li:eq(1) a').click(function(){ // get top topic
		 $.post(ctx+"/topic/toplist",{
		},function(result){
			$("#ios").html(result.data);
		}); 
	});
	
	$(".nine .glyphicon-remove").click(function(){ // remove
		var id = $(this).parent().parent().attr("data-id");
		if(confirm("当前话题将要被删除？")){
			$.post(ctx+"/topic/delete",{
				id:id
			},function(result){
				result_(result);
			});
		}
	});
	
	$(".nine .glyphicon-thumbs-up").click(function(){
		var id = $(this).parent().parent().attr("data-id");
		promxuse(1,id,$(this));
	});
	
	$(".nine .glyphicon-eye-open").click(function(){
		var id = $(this).parent().parent().attr("data-id");
		promxuse(2,id,$(this));
	});
	
	function promxuse(type,id,obj){
		var number = getTmpNumber();
		$.tipsBox({
			obj: obj,
			str: "+"+number,
            callback: function() {
               $.post(ctx +"/topic/prometheus",{
            	   id:id,
            	   type:type,
            	   number:number
               });
            }
		});
	}
	
	$(".nine p").click(function(){
		var id = $(this).parent().attr("data-id");
		window.location.href = ctx +"/topic/update?id=" + id;
	});
	
	$(".btn_push").click(function(){
		var topicId = $(this).attr("data-h");
		$.post(ctx+"/topic/push",{
			topicId:topicId
		},function(result){
			result_(result);
		});
	});
	
	var count = parseInt('${count}');
	var currentpage = parseInt('${currentpage }');
	var initPagination = function() {
	$(".pagination").pagination(count, {
	num_edge_entries : 1,
	num_display_entries : 10,
	callback : pageselectCallback,
	items_per_page:10,
	current_page : currentpage
	});
	}();
	});

	function pageselectCallback(page_index, jq) {
	if ($("#current_page").val() != page_index) {
	$("#current_page").val(page_index);
	$("#form").submit();
	}
	return false;
	}
	
	function cancelTopicTop(topicId){
		$.post(ctx + "/topic/top",{
			top:0,
			topicId:topicId
		},function(result){
			result_(result);
		});
	}
	
</script>
<div class="container">
	<div class="row">
	<div class="col-sm-12">
		<ol class="breadcrumb">
	  <li><a href="#">晒单</a></li>
	  <li><a href="#" class="active">晒单列表</a></li>
	</ol>
	</div>
	</div>
	<ul id="myTab" class="nav nav-tabs">
   	<li class="active"><a href="#home" data-toggle="tab">
      	删除/置顶</a>
   	</li>
   	<li><a href="#ios" data-toggle="tab">取消置顶</a></li>
	</ul>
	<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
     <div id="foot">
	<div class="pagination"></div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<ul class="nine">
			<c:forEach var="bean" items="${list }">
			<li data-id="${bean.id }">
				<img src="${bean.imgKey }"/>
				<p title="点击编辑">${bean.title }</p>
				<h1></h1>
				 <a href="http://www.yiqihitao.com/api/topic/detail?id=${bean.id }" class="btn btn-info" role="button" target="_blank">专题预览 </a>
		       	<a href="${ctx }/topic/commentlist?id=${bean.id}" class="btn btn-info" role="button">专题评论 </a>
		       	<c:if test="${bean.preview eq true }">
		       		<button type="button" class="btn btn-info btn_push" data-h="${bean.id }">专题发布</button>
		       	</c:if>
		       	 
		        <a>
		        	<span class="glyphicon glyphicon-export" title="置顶"></span>
		        </a>
				<a>
		          <span class="glyphicon glyphicon-remove" title="删除"></span>
		        </a>
		        
		        <a><span class="glyphicon glyphicon-thumbs-up" title="赞"></span></a>
		       	<a><span class="glyphicon glyphicon-eye-open" title="阅读"></span></a>
		        
			</li>
			</c:forEach>
		</ul>
		</div>
	</div>
	
	<form action="${ctx }/topic/topiclist" name="form" id="form" method="post">
	<input type="hidden" id="current_page" name="currentpage" value="${currentpage }" />
	</form>
 
   </div>
   <div class="tab-pane fade" id="ios">
      
   </div>
  
</div>
</div>